<template>
  <div class="postlist">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: 'hello' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">文章管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card class="box-card"
             style='margin-top:20px'>
      <!-- 添加表格 -->
      <el-table :data="postList"
                style="width: 100%"
                border>
        <el-table-column type="index"
                         width="50">
        </el-table-column>
        <el-table-column prop="title"
                         label="标题"
                         width="680">
        </el-table-column>
        <el-table-column label="类型"
                         width="180">
          <!-- 添加自定义模板列用于获取数据 -->
          <template slot-scope="scope">
            {{scope.row.type==1?'文章':'视频'}}
          </template>
        </el-table-column>
        <el-table-column prop="user.nickname"
                         width="180"
                         label="作者">
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作">
          <!-- scope:就是数据,它是封装的子组件传递给父组件的数据 ，称为行对象
          scope.row:行数据对象，就是当前这一行所对应的数据对象-->
          <template slot-scope="scope">
            <el-tooltip class="item"
                        effect="dark"
                        content="编辑"
                        placement="top">
              <el-button type="primary"
                         icon="el-icon-edit"></el-button>
            </el-tooltip>

            <el-tooltip class="item"
                        effect="dark"
                        content="分享"
                        placement="top">
              <el-button type="success"
                         icon="el-icon-share"></el-button>
            </el-tooltip>
            <el-tooltip class="item"
                        effect="dark"
                        content="删除"
                        placement="top">
              <el-button type="warning"
                         icon="el-icon-delete"
                         @click="del(scope)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pageIndex"
                     :page-sizes="[2, 4, 6, 8]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total-0">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getPostList } from '@/apis/post.js'
export default {
  data () {
    return {
      postList: [],
      pageIndex: 1,
      // 这个值应该与sizes数组中的第一个值 对应
      pageSize: 2,
      total: ''
    }
  },
  methods: {
    del (scope) {
      console.log(scope);
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      // 重置全局的pageSize
      this.pageSize = val
      // 根据重置后的pageSize重新获取数据
      this.init()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val
      this.init()
    },
    async init () {
      let res = await getPostList({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      })
      console.log(res);
      this.postList = res.data.data
      this.total = res.data.total
    }
  },
  async mounted () {
    this.init()
  }
}
</script>

<style>
</style>